<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CodePen - File Sharing Web App</title>

    <link rel="stylesheet" href="/static/css/normalize.css">
    <link rel="stylesheet" href="/static/css/style.css">
    <link rel="stylesheet" href="/static/css/go.css">
    <script src='/static/js/jquery.min.js'></script>
    <script src="/static/js/script.js"></script>


    {##}
    <link rel="stylesheet" href="/static/css/popBeAlert.css">
    {##}
    {#   right_click css js---------------------------------- #}
    <link rel="stylesheet" href="/static/css/right_clickcontextMenu.css"/>
    <script src="/static/js/right_clickjq1.10.2.js"></script>
    <script>
        var $right_click = $.noConflict(true)
    </script>
    <script src="/static/js/right_clickjquery.contextMenu.min.js"></script>
    {#   ---------------------------------------------------- #}

    {#  upload css js --------------------------------------------- #}
    {#    <link href="/static/css/up2_bootstrap.min.css" rel="stylesheet">#}
    <link rel="stylesheet" type="text/css" href="/static/css/jquery.treemenu.css"/>
    <script src="/static/js/tree/jquery.treemenu.js"></script>
    <script src="/static/js/tree/jquery-1.11.2.min.js"></script>
    <script>
        var $upload = $.noConflict(true)
    </script>
    <style>
        * {
            list-style: none;
            border: none;
        }

        body {
            font-family: Arial;
            background-color: #2C3E50;
        }

        .tree {
            color: #46CFB0;
            width: 800px;
            margin: 100px auto;
        }

        .tree li,
        .tree li > a,
        .tree li > span {
            padding: 4pt;
            border-radius: 4px;
        }

        .tree li a {
            color: #46CFB0;
            text-decoration: none;
            line-height: 20pt;
            border-radius: 4px;
        }

        .tree li a:hover {
            background-color: #34BC9D;
            color: #fff;
        }

        .active {
            background-color: #34495E;
            color: white;
        }

        .active a {
            color: #fff;
        }

        .tree li a.active:hover {
            background-color: #34BC9D;
        }
    </style>
    {#   --------------------------------------------- #}
    <style type="text/css">
        a {
            text-decoration: none
        }

        .cr {
            /*circle radius*/
            border: 1px solid #ccc;
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
        }
    </style>

</head>
<body id=body οnscrοll=SetCookie("scroll",body.scrollTop); οnlοad="scrollback();">

{#<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">#}
{% load file_size %}
{% load file_date %}
<div class="app-container">
    <div class="left-area">
        <button class="btn-close-left">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
                 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-x-circle"
                 viewBox="0 0 24 24">
                <defs/>
                <circle cx="12" cy="12" r="10"/>
                <path d="M15 9l-6 6M9 9l6 6"/>
            </svg>
        </button>

        <div class="app-name">MyDocs</div>
        <a style="margin-top: 30px;text-decoration:none" class="item-link" id="show_main_show">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
                 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-folder"
                 viewBox="0 0 24 24">
                <defs></defs>
                <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"></path>
            </svg>
        </a>

        <button style="display: none" class="btn-logout">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
                 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-log-out"
                 viewBox="0 0 24 24">
                <defs/>
                <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
            </svg>
        </button>
    </div>
    {# 主界面 start #}
    <div onscroll="KeepScrollBar()" id="main_show" style="" class="main-area">
        <button class="btn-show-right-area">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                 class="feather feather-chevron-left">
                <polyline points="15 18 9 12 15 6"/>
            </svg>
        </button>
        <button class="btn-show-left-area">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                 stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="3" y1="12" x2="21" y2="12"/>
                <line x1="3" y1="6" x2="21" y2="6"/>
                <line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
        </button>
        <div class="main-area-header">
            <div class="search-wrapper" id="searchLine">
                <input class="search-input" type="text" placeholder="e.g. files.doc">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor"
                     stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-search"
                     viewBox="0 0 24 24">
                    <defs/>
                    <circle cx="11" cy="11" r="8"/>
                    <path d="M21 21l-4.35-4.35"/>
                </svg>
            </div>
        </div>
        <section class="content-section">
            <h1 class="section-header">Quick Access</h1>
            <div class="access-links">
                <div class="access-link-wrapper">
                    <div class="access-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-image">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                            <circle cx="8.5" cy="8.5" r="1.5"/>
                            <polyline points="21 15 16 10 5 21"/>
                        </svg>
                    </div>
                    <span class="access-text">Images</span>
                </div>
                <div class="access-link-wrapper">
                    <div class="access-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-music">
                            <path d="M9 18V5l12-2v13"/>
                            <circle cx="6" cy="18" r="3"/>
                            <circle cx="18" cy="16" r="3"/>
                        </svg>
                    </div>
                    <span class="access-text">Music</span>
                </div>
                <div class="access-link-wrapper">
                    <div class="access-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24"
                             fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round"
                             stroke-linejoin="round" class="feather feather-play">
                            <polygon points="5 3 19 12 5 21 5 3"/>
                        </svg>
                    </div>
                    <span class="access-text">Video</span>
                </div>
                <div class="access-link-wrapper">
                    <div class="access-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-align-left">
                            <line x1="17" y1="10" x2="3" y2="10"/>
                            <line x1="21" y1="6" x2="3" y2="6"/>
                            <line x1="21" y1="14" x2="3" y2="14"/>
                            <line x1="17" y1="18" x2="3" y2="18"/>
                        </svg>
                    </div>
                    <span class="access-text">Docs</span>
                </div>
                <div class="access-link-wrapper">
                    <div class="access-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-layers">
                            <polygon points="12 2 2 7 12 12 22 7 12 2"/>
                            <polyline points="2 17 12 22 22 17"/>
                            <polyline points="2 12 12 17 22 12"/>
                        </svg>
                    </div>
                    <span class="access-text">Apps</span>
                </div>
                <div class="access-link-wrapper">
                    <div class="access-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"
                             class="feather feather-arrow-down-circle">
                            <circle cx="12" cy="12" r="10"/>
                            <polyline points="8 12 12 16 16 12"/>
                            <line x1="12" y1="8" x2="12" y2="16"/>
                        </svg>
                    </div>
                    <span class="access-text">Download</span>
                </div>
            </div>
        </section>
        <section style="display: none" class="content-section">
            <div class="section-header-wrapper">
                <h1 class="section-header">Preview</h1>
                <a class="section-header-link">
                    View in folders
                </a>
            </div>
            <div class="content-section-line">
                <div class="section-part left">
                    <a class="image-wrapper">
                        <div class="image-overlay">
                            <div class="video-info">
                                <div class="video-info-text">
                                    <p class="video-name medium">Happiness & Tears</p>
                                    <p class="video-subtext medium">45.5 MB</p>
                                </div>
                                <button class="btn-play"></button>
                            </div>
                        </div>
                        <img src="/static/img/p1.jpg"/>
                        <span class="video-time">10:32</span>
                    </a>
                </div>
                <div class="section-part right">
                    <div class="content-part-line">
                        <a class="image-wrapper">
                            <div class="image-overlay">
                                <div class="video-info">
                                    <div class="video-info-text">
                                        <p class="video-name tiny">High Hopes</p>
                                        <p class="video-subtext tiny">50 MB</p>
                                    </div>
                                </div>
                            </div>
                            <img src="/static/img/p2.jpg"/>
                            <span class="video-time">02:35</span>
                        </a>
                        <a class="image-wrapper">
                            <div class="image-overlay">
                                <div class="video-info">
                                    <div class="video-info-text">
                                        <p class="video-name tiny">Imaginery you</p>
                                        <p class="video-subtext tiny">210.2 MB</p>
                                    </div>
                                </div>
                            </div>
                            <img src="/static/img/p3.jpg"/>
                            <span class="video-time">04:15</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>
        <section class="content-section">
            <div class="section-header-wrapper">
                <h1 class="section-header">All Files</h1>
            </div>
            <div class="files-table" style="height: 440px;overflow-y: auto">
                {#     如果当前目录不是根目录 则显示返回上一级按钮     #}
                {% if add_return == 'True' %}
                    <div class="files-table-header">
                        <a href="/?folder_name={{ last_path }}">
                            <div style="color: #5a8ff7" class="column-header table-cell">返回上一级</div>
                        </a>
                    </div>
                {% endif %}
                <div class="files-table-header">
                    <div class="column-header table-cell">Name</div>
                    <div class="column-header table-cell size-cell">Size</div>
                    <div class="column-header table-cell">Last Modified</div>
                    <div class="column-header table-cell">Action</div>
                </div>
                {% for name, file_data in fs.items %}
                    <div class="files-table-row">
                        <div id="name_div"
                             class="table-cell name-cell type_show right_clickcontainer right_clickbox right_clickbox2"
                             type-show="{{ file_data.2 }}" file_path="{{ file_data.0 }}">
                      <span id="name_span"
                            style="display:inline-flex;width:10rem;text-overflow:ellipsis;overflow: auto;white-space: nowrap;">
                          {{ name }}
                      </span>
                        </div>
                        {% if file_data.2 != '文件夹' %}
                            <div class="table-cell"> {{ file_data.1.st_size|file_size:1024 }}</div>
                        {% else %}
                            <div class="table-cell"> -</div>
                        {% endif %}

                        <div class="table-cell">{{ file_data.1.st_mtime| file_date }}</div>
                        <div class="table-cell action-cell">
                            {% if file_data.2 in can_view %}
                                <a style="text-decoration:none" href="http://127.0.0.1:1628/files/{{ file_data.3 }}">
                                    <span style="color: #4bc0dd">预览</span>
                                </a>
                            {% elif file_data.2 == '文件夹' %}
                                <a style="text-decoration:none"
                                   href="http://127.0.0.1:1628?folder_name={{ file_data.0 }}&add_return=True">
                                    <span style="color: #4bc0dd">打开</span>
                                </a>
                            {% else %}
                                <a style="text-decoration:none" title="不支持预览的文件格式">
                                    <span style="color: gray;text-decoration:line-through">预览</span>
                                </a>
                            {% endif %}

                            {% if file_data.2 == '文件夹' %}
                                <a class="download_file" style="margin-left: 10px;text-decoration:none"
                                   href="{% url 'download_file' %}?file_path={{ file_data.0 }}">
                                    <span style="color: #5cb85c">下载</span>
                                </a>
                            {% else %}
                                <a style="margin-left: 10px;text-decoration:none"
                                   href="{% url 'download_file' %}?file_path={{ file_data.0 }}">
                                    <span style="color: #5cb85c">下载</span>
                                </a>
                            {% endif %}
                            <a class="del_right" curr_path="{{ file_data.0 }}"
                               style="margin-left: 10px;text-decoration:none">
                                <span style="color: crimson">删除</span>
                            </a>
                        </div>
                    </div>
                {% empty %}
                    <div class="files-table-row">
                        <div style="color: #5e5e5e" class="table-cell name-cell">(空文件夹)</div>
                        <div class="table-cell size-cell"></div>
                        <div class="table-cell"></div>
                        <div class="table-cell action-cell">
                        </div>
                    </div>
                {% endfor %}
            </div>
        </section>
    </div>
    {# 主界面 end  #}

    {# 树状图 start #}
    <div id="tree_page" style="display: none;width: 300px;height: 500px;overflow:auto">
        <ul style="width: 300px" class="tree">
            {% for name, file_data in fs.items %}
                <li><span curr_path="{{ file_data }}" class="first_folder glyphicon glyphicon-plus-sign"></span>
                    <a>{{ name }}</a>
                    <ul>
                        <li><a href="#">Contact</a></li>
                        {#                        <li><a href="#">Blog</a></li>#}
                        {#                        <li><a href="#">Jobs</a>#}
                        {#                            <ul>#}
                        {#                                <li><a href="#jobs1">Job 1</a></li>#}
                        {#                                <li><a href="#jobs2">Job 2</a></li>#}
                        {#                                <li><a href="#jobs3">Job 3</a></li>#}
                        {#                            </ul>#}
                        {#                        </li>#}
                    </ul>
                </li>
            {% endfor %}
        </ul>
    </div>
    <script>
        $(function () {
            function tree() {
                $(".tree").treemenu({delay: 300}).openActive();
            }

            $('.first_folder').click(function () {
                console.log($(this))
                $(this).parent().append('<ul class="treemenu"><li class="tree-opened"><a href="#">Job 1</a></li></ul>')
            })
            setTimeout(tree, 300)
        });
    </script>
    {# 树状图 end #}


    <div class="right-area">
        <button class="btn-close-right">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor"
                 stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-x-circle"
                 viewBox="0 0 24 24">
                <defs/>
                <circle cx="12" cy="12" r="10"/>
                <path d="M15 9l-6 6M9 9l6 6"/>
            </svg>
        </button>
        {# 上传栏 start #}
        <div class="right-area-header-wrapper">
            <p class="right-area-header">Uploads</p>
        </div>
        <div style="overflow-y: auto;height: 30%;scrollbar-gutter: stable;">
            <div class="download-item-line">
                <div class="download-area">
                    <div class="download-item-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
                            <defs></defs>
                            <circle cx="256" cy="256" r="256" fill="#4b50dd"></circle>
                            <path fill="#f5f5f5"
                                  d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
                            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
                            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
                            <g fill="#f5f5f5" class="g">
                                <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
                                <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="download-item-texts">
                        <p class="download-text-header">Glitter.mp4</p>
                        <p class="download-text-info">34.45 MB<span>Waiting for download</span></p>
                    </div>
                    <div class="download-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
                            <defs/>
                            <path d="M403.939 295.749l-78.814 78.833V172.125c0-10.557-8.568-19.125-19.125-19.125s-19.125 8.568-19.125 19.125v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043 0-7.478 7.478-7.478 19.584 0 27.042L289.208 431c4.59 4.59 10.863 6.005 16.812 4.953 5.929 1.052 12.221-.382 16.811-4.953l108.19-108.19c7.478-7.478 7.478-19.583 0-27.042-7.498-7.478-19.604-7.478-27.082-.019zM306 0C137.012 0 0 136.992 0 306s137.012 306 306 306 306-137.012 306-306S475.008 0 306 0zm0 573.75C158.125 573.75 38.25 453.875 38.25 306S158.125 38.25 306 38.25 573.75 158.125 573.75 306 453.875 573.75 306 573.75z"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="download-item-line">
                <div class="download-area">
                    <div class="download-item-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
                            <defs></defs>
                            <circle cx="256" cy="256" r="256" fill="#4bc0dd"></circle>
                            <path fill="#f5f5f5"
                                  d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
                            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
                            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
                            <g fill="#f5f5f5" class="g">
                                <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
                                <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="download-item-texts">
                        <p class="download-text-header">Glitter.mp4</p>
                        <div class="progress-bar">
                            <span class="progress"></span>
                        </div>
                    </div>
                    <div class="download-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 512 512">
                            <defs/>
                            <path d="M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0"/>
                            <path d="M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="download-item-line">
                <div class="download-area">
                    <div class="download-item-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
                            <defs></defs>
                            <circle cx="256" cy="256" r="256" fill="#4bc0dd"></circle>
                            <path fill="#f5f5f5"
                                  d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
                            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
                            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
                            <g fill="#f5f5f5" class="g">
                                <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
                                <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="download-item-texts">
                        <p class="download-text-header">Glitter.mp4</p>
                        <div class="progress-bar">
                            <span class="progress"></span>
                        </div>
                    </div>
                    <div class="download-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 512 512">
                            <defs/>
                            <path d="M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0"/>
                            <path d="M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="download-item-line">
                <div class="download-area">
                    <div class="download-item-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
                            <defs></defs>
                            <circle cx="256" cy="256" r="256" fill="#4bc0dd"></circle>
                            <path fill="#f5f5f5"
                                  d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
                            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
                            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
                            <g fill="#f5f5f5" class="g">
                                <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
                                <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="download-item-texts">
                        <p class="download-text-header">Glitter.mp4</p>
                        <div class="progress-bar">
                            <span class="progress"></span>
                        </div>
                    </div>
                    <div class="download-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 512 512">
                            <defs/>
                            <path d="M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0"/>
                            <path d="M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="download-item-line">
                <div class="download-area">
                    <div class="download-item-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
                            <defs></defs>
                            <circle cx="256" cy="256" r="256" fill="#4bc0dd"></circle>
                            <path fill="#f5f5f5"
                                  d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
                            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
                            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
                            <g fill="#f5f5f5" class="g">
                                <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
                                <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="download-item-texts">
                        <p class="download-text-header">Glitter.mp4</p>
                        <div class="progress-bar">
                            <span class="progress"></span>
                        </div>
                    </div>
                    <div class="download-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 512 512">
                            <defs/>
                            <path d="M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0"/>
                            <path d="M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>
        {# 上传栏 end #}
        {# 下载栏 start #}
        <div style="margin-top: 50px" class="right-area-header-wrapper">
            <p class="right-area-header">Packing</p>
        </div>
        <div id="packing" style="overflow-y: auto;height: 30%;scrollbar-gutter: stable;">
            <div class="download-item-line">
                <div class="download-area">
                    <div class="download-item-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
                            <defs></defs>
                            <circle cx="256" cy="256" r="256" fill="#4b50dd"></circle>
                            <path fill="#f5f5f5"
                                  d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
                            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
                            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
                            <g fill="#f5f5f5" class="g">
                                <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
                                <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="download-item-texts">
                        <p class="download-text-header">Glitter.mp4</p>
                        <p class="download-text-info">34.45 MB<span>Waiting for download</span></p>
                    </div>
                    <div class="download-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
                            <defs/>
                            <path d="M403.939 295.749l-78.814 78.833V172.125c0-10.557-8.568-19.125-19.125-19.125s-19.125 8.568-19.125 19.125v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043 0-7.478 7.478-7.478 19.584 0 27.042L289.208 431c4.59 4.59 10.863 6.005 16.812 4.953 5.929 1.052 12.221-.382 16.811-4.953l108.19-108.19c7.478-7.478 7.478-19.583 0-27.042-7.498-7.478-19.604-7.478-27.082-.019zM306 0C137.012 0 0 136.992 0 306s137.012 306 306 306 306-137.012 306-306S475.008 0 306 0zm0 573.75C158.125 573.75 38.25 453.875 38.25 306S158.125 38.25 306 38.25 573.75 158.125 573.75 306 453.875 573.75 306 573.75z"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="download-item-line">
                <div class="download-area">
                    <div class="download-item-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
                            <defs></defs>
                            <circle cx="256" cy="256" r="256" fill="#4bc0dd"></circle>
                            <path fill="#f5f5f5"
                                  d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
                            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
                            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
                            <g fill="#f5f5f5" class="g">
                                <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
                                <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="download-item-texts">
                        <p class="download-text-header">Glitter.mp4</p>
                        <div class="progress-bar">
                            <span class="progress"></span>
                        </div>
                    </div>
                    <div class="download-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 512 512">
                            <defs/>
                            <path d="M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0"/>
                            <path d="M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0"/>
                        </svg>
                    </div>
                </div>
            </div>

        </div>
        {# 下载栏 end #}
    </div>
</div>

{#-------12312gh312312 js----------#}
<script>
    $upload(function () {
        $.get('{% url 'folder_show' %}', function (res) {
            {#console.log(res)#}
        })

    })

</script>
{#--------------------------------#}

{#-------文件末尾删除按钮 js----------#}
<script>
    $('.del_right').click(function () {
        let curr_path = {'curr_path': this.attributes.curr_path.nodeValue}
        let codeurl = '{% url 'del_file' %}'
        $.post(codeurl, curr_path, function (result) {
            if (result.status === '200') {
                window.location.reload()
            }
        })
    })
</script>
{#--------------------------------#}

{#-------点击左侧图标展示相应界面 js----------#}
<script>
    $('#show_main_show').click(function () {
        $('#upload_page').css(name = 'display', value = 'none')
        {#$('#tree_page').css(name = 'display', value = 'none')#}
        $('#main_show').css(name = 'display', value = '')

    })
    $('.show_upload_page').click(function () {
        $('#main_show').css(name = 'display', value = 'none')
        $('#upload_page').css(name = 'display', value = '')
        {#$('#tree_page').css(name = 'display', value = '')#}
    })
</script>
{#--------------------------------#}


{#-------打包框弹出 js----------#}
<script>
    $('.download_file').click(function () {

        // 创建socket连接
        if (window.s) {
            window.s.close()
        }
        //window.location.host
        /*创建socket连接*/
        var socket = new WebSocket("ws://" + window.location.host + "/folder_to_zip/");
        socket.onopen = function () {
            console.log('WebSocket open');//成功连接上Websocket
        };
        // Call onopen directly if socket is already open
        if (socket.readyState === WebSocket.OPEN) socket.onopen();
        window.s = socket;

        ///////////////////////
        /*add——创建tbx下的div加文字和变宽度的方法*/
        let jin_du_tiao_value = 0.0
        let pack_list = $("#packing");
        pack_list.append(`
<div class="download-item-line">
                <div class="download-area">
                    <div class="download-item-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
                            <defs></defs>
                            <circle cx="256" cy="256" r="256" fill="#4bc0dd"></circle>
                            <path fill="#f5f5f5"
                                  d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
                            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
                            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
                            <g fill="#f5f5f5" class="g">
                                <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
                                <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
                            </g>
                        </svg>
                    </div>
                    <div class="download-item-texts">
                        <p class="download-text-header">Glitter.mp4</p>
                        <div class="progress-bar">
                            <span class="progress"></span>
                        </div>
                    </div>
                    <div class="download-icon">
                        <p class="jindutiao" style="font-size: xx-small;margin-left: -23px;margin-bottom: 5px;">10%</p>
                    <svg style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="1 1 512 512">
                            <defs/>
                            <path d="M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0"/>
                            <path d="M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0"/>
                        </svg>
                    </div>
                </div>
            </div>                   `)
        $('.download-text-header').each(function () {
            if (this.innerText.length > 15){
                this.innerText = this.innerText.substring(0, 15) + "..."
            }
        })
        socket.onmessage = function (e) {
            {#console.log('message: ' + e.data);//打印出服务端返回过来的数据#}
            if (e.data !== 'is_over') {
                jin_du_tiao_value = parseFloat(e.data)
                $('.progress').css("width", jin_du_tiao_value + "%").css("background-color", '#4bc0dd')
                $('.jindutiao').text(jin_du_tiao_value + "%").css('color', 'black')

            } else {
                $('.progress').css("width", 100 + "%").css("background-color", 'lightgreen')
                $('.jindutiao').text("  Done").css('color', 'lightseagreen')
                if (window.s) {
                    window.s.close();//关闭websocket
                    console.log('websocket已关闭');
                }
            }
        };


    })
</script>
{#--------------------------------#}


{#-------右键点击菜单 js----------#}
<script>
    {#console.log($right_click.fn.jquery,1)#}
    {#console.log($.fn.jquery,2)#}
    {#console.log($upload.fn.jquery,3)#}
    let curr_ele = ''
    $(".right_clickbox2").contextMenu({
        width: 110, // width
        itemHeight: 30, // 菜单项height
        bgColor: "#333", // 背景颜色
        color: "#fff", // 字体颜色
        fontSize: 12, // 字体大小
        hoverBgColor: "#99CC66", // hover背景颜色
        target: function (ele) { // 当前元素
            curr_ele = ele
        },
        menu: [{ // 菜单项
            text: "新建文件夹",
            icon: "/static/img/add.png",
            callback: function () {
                let curr_path = {'curr_path': curr_ele[0].attributes.file_path.nodeValue}
                let codeurl = '{% url 'creat_new_folder' %}'
                $.post(codeurl, curr_path, function (result) {
                    if (result.status === '200') {
                        window.location.reload()
                    }
                })
            }
        },
            {
                text: "上传文件",
                icon: "/static/img/upload.png",
                callback: function () {
                    function get_uuid() {
                        var len = 32;//32长度
                        var radix = 16;//16进制
                        var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
                        var uuid = [], i;
                        radix = radix || chars.length;
                        if (len) {
                            for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random() * radix];
                        } else {
                            var r;
                            uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
                            uuid[14] = '4';
                            for (i = 0; i < 36; i++) {
                                if (!uuid[i]) {
                                    r = 0 | Math.random() * 16;
                                    uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r];
                                }
                            }
                        }
                        return uuid.join('');
                    }

                    function uploadStep() {
                        let file_uuid = get_uuid()
                        var upload = function (file, skip) {
                            let data = new FormData();
                            var blockSize = 2 * 1000 * 1000; // 20MB
                            var nextSize = Math.min((skip + 1) * blockSize, file.size);
                            var fileData = file.slice(skip * blockSize, nextSize);
                            data.append("file_data", fileData);
                            data.append("file_uuid", file_uuid);

                            //由于传输的是二进制数据(fileData),后台(MVC或者Api无法通过files[0].FileName获取文件名
                            //所以只能通过构造form表单数据传递(键值对形式,fileName=xxx.jpg&aaa=yyy),后台再通过request.Form[fileName]获取
                            data.append("fileName", file.name);

                            var url = "{% url 'receive_upload_to_local' %}";
                            $.ajax({
                                url: url,
                                type: "POST",
                                data: data,
                                processData: false, // 告诉jQuery不要去处理发送的数据
                                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                                success: function () {
                                    $(".result").html("已经上传了" + (skip + 1) + "块文件");
                                    if (file.size <= nextSize) { //如果上传完成，则跳出继续上传
                                        alert("上传完成");
                                        window.location.reload()
                                        return;
                                    }
                                    upload(file, ++skip); //递归调用
                                }
                            });
                        };
                        var file = $("#myFileStep")[0].files[0];
                        upload(file, 0);
                    }

                    let curr_path = {'curr_path': curr_ele[0].attributes.file_path.nodeValue}
                    console.log(curr_path)
                    $('#myFileStep').trigger('click')
                    $('#myFileStep').change(function () {
                        console.log($('#myFileStep')[0].files)
                        uploadStep()
                    })

                    let codeurl = '{% url 'creat_new_folder' %}'
                    {#$.post(codeurl, curr_path, function (result) {#}
                    // })
                }
            },
            {
                text: "重命名",
                icon: "/static/img/rename.png",
                callback: function () {
                    let curr_path = curr_ele[0].attributes.file_path.nodeValue
                    let split_curr_path = curr_path.split('\\')
                    let file_name = split_curr_path[split_curr_path.length - 1]
                    $(curr_ele[0].childNodes[1]).hide()
                    $(curr_ele[0]).append('<input id="rename" class="cr" style="width: 10rem;line-height: 1px" name="new_name" type="text" >')
                    $('#rename').attr('value', file_name)
                    $('#rename').focus()
                    $('#rename').keydown(function () {
                        if (event.keyCode === 13) {
                            this.blur()
                        }
                    })
                    $('#rename').blur(function () {

                        $(curr_ele[0].childNodes[1]).show()
                        let new_name = $('#rename').val()
                        let data = {'curr_path': curr_path, 'new_name': new_name}
                        let codeurl = '{% url 'rename_folder' %}'
                        $.post(codeurl, data, function (result) {
                            if (result.status === '200') {
                                window.location.reload()
                            } else {
                                console.log('result', result)
                            }
                        })

                        $('#rename').remove()
                    })
                    /* let curr_path = {'curr_path': curr_ele[0].attributes.file_path.nodeValue}

                    $.post(codeurl, curr_path, function (result) {
                        if (result.status === '200') {
                            window.location.reload()
                        }
                    })*/
                }
            },
            {
                text: "复制",
                icon: "/static/img/copy.png",
                callback: function () {
                    alert("复制");
                }
            },
            {
                text: "粘贴",
                icon: "/static/img/paste.png",
                callback: function () {
                    alert("粘贴");
                }
            },
            {
                text: "删除",
                icon: "/static/img/del.png",
                callback: function () {
                    let curr_path = {'curr_path': curr_ele[0].attributes.file_path.nodeValue}
                    let codeurl = '{% url 'del_file' %}'
                    $.post(codeurl, curr_path, function (result) {
                        if (result.status === '200') {
                            window.location.reload()
                        }
                    })
                }
            }
        ]

    });
</script>
{#------------------------------#}


{#---上传文件 js--------------#}
<script>
    function uploadStep() {
        var upload = function (file, skip) {
            var data = new FormData();
            var blockSize = 20 * 1000 * 1000; // 20MB
            var nextSize = Math.min((skip + 1) * blockSize, file.size);
            var fileData = file.slice(skip * blockSize, nextSize);
            data.append("file_data", fileData);
            data.append("is_end", 'False');

            //由于传输的是二进制数据(fileData),后台(MVC或者Api无法通过files[0].FileName获取文件名
            //所以只能通过构造form表单数据传递(键值对形式,fileName=xxx.jpg&aaa=yyy),后台再通过request.Form[fileName]获取
            data.append("fileName", file.name);

            var url = "{% url 'receive_upload_to_local' %}";
            $.ajax({
                url: url,
                type: "POST",
                data: data,
                processData: false, // 告诉jQuery不要去处理发送的数据
                contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                success: function () {
                    $(".result").html("已经上传了" + (skip + 1) + "块文件");
                    if (file.size <= nextSize) { //如果上传完成，则跳出继续上传
                        alert("上传完成");
                        return;
                    }
                    upload(file, ++skip); //递归调用
                }
            });
        };
        var files = $("#myFileStep")[0].files
        for (let j = 0; j < files.length; j++) {
            var file = files[j];
            upload(file, 0);
        }
        {#var file = $("#myFileStep")[0].files[0];#}
        {#upload(file, 0);#}
    }

    $('#uupload').click(uploadStep)
    {#$('#uupload').click(function () {#}
    {##}
    {#    })#}
</script>
{#--------------------------#}

{#-----重新加载界面后保持原来滚动位置 js--------------#}
<script type="text/javascript">
    let scrollPos;

    function KeepScrollBar() {
        if (typeof document.body != 'undefined') {
            scrollPos = document.getElementById('main_show').scrollTop;
        }
        document.cookie = "scrollTop=" + scrollPos;

    }

    window.onload = function () {
        if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
            var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/);
            document.getElementById('main_show').scrollTop = parseInt(arr[1]);
        }
    }
</script>
{# ------打包框  ----------------------------------------------#}

<div style="display: none;margin-top: -120px;margin-left: -160px;border-radius:15px" class="BeAlert_box da_bao_kuang">
    <div class="BeAlert_image info"></div>
    <div class="BeAlert_title"></div>
    <div class="BeAlert_message"><span>正在打包 <img style="margin-top: -5px" src="/static/img/loading.gif"/></span></div>

    <div style="display: none;margin-top: 1px" class="box da_bao_kuang">
        <div class="tbox">
            <div class="tiao"></div>
        </div>

    </div>

</div>
<div style="display: none;" class="BeAlert_overlay da_bao_kuang"></div>

{# ------进度条  ----------------------------------------------#}
{#<script>#}
{#    var i = 0;#}
{##}
{#    /*add——创建tbx下的div加文字和变宽度的方法*/#}
{#    function add(i) {#}
{#        var tbox = $(".tbox");#}
{#        var tiao = $(".tiao");#}
{#        tiao.css("width", i + "%").html(i + "%");#}
{#        if (i >= 100) {#}
{#            $('.da_bao_kuang').css(name = 'display', value = "none")#}
{#        }#}
{#    }#}
{##}
{#    /*创建方法（i++循环起来）*/#}
{##}
{#    function xh() {#}
{#        if (i <= 100) {#}
{#            setTimeout("xh()", 10)#}
{#console.log('i', i)#}
{#            $.get({% url 'folder_to_zip' %}, function (data) {#}
{#                i = data.jin_du_tiao#}
{#            })#}
{##}
{#            add(i);#}
{#        }#}
{#    }#}
{##}
{#    /*调用xh()函数*/#}
{#    $(document).ready(function () {#}
{#        xh();#}
{##}
{#    });#}
{##}
{#</script>#}
{# ------进度条  ----------------------------------------------#}
<style>

    .box {
        width: 397px;
        margin: 30px auto;
    }

    .tbox {
        width: 397px;
        height: 49px;
        background: url(/static/img/jindutiao/bak.png) no-repeat;
        margin-top: 20px;
    }

    .tbox div {
        width: 0px;
        height: 49px;
        background: url(/static/img/jindutiao/pro.png) no-repeat;
        text-align: center;

        font-family: Tahoma;
        font-size: 18px;
        line-height: 48px;
    }

</style>
{# ------进度条  ----------------------------------------------#}
{# ------打包框  ----------------------------------------------#}
</body>
</html>
